<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            background-color: #333;
            width: 200px;
            height: 200px;
            margin-bottom: 400px;
            position: relative;
            /* top: 100px;
            left: 100px; */
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <hr color="red">
    <script>
        const box = document.querySelector('.box')
        const hr = document.querySelector('hr')
        let t
        let speed = 10
        addEventListener('click',e=>{
            clearInterval(t)
            t = setInterval(()=>{
                console.log(speed)
                // speed = (400 - parseFloat(getComputedStyle(box).top)) / 10
                speed = Math.ceil((400 - parseFloat(getComputedStyle(box).top)) / 10)
                let bst = parseFloat(getComputedStyle(box).top) + speed + 'px'
                box.style.top = bst
                if(parseFloat(box.style.top) + speed >= 400){
                    clearInterval(t)
                    box.style.top = 400 + 'px'
                }
            },30)
        })
        //浏览器中的像素其实并不会 取整 ，只要格式正确，写多少就是多少
        //                        ↑
        // (导致speed为小数时，每次都被舍去以至于操控的元素原地不动)
        //元素不动，元素css属性值一直在动（累加/累减），元素每逢css属性值改变1或以上就会动
    </script>
</body>
</html>